<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文墨勘 - 智能校对</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .upload-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(112, 83, 59, 0.2);
        }
        
        .nav-item-active {
            color: #70533B;
        }
        
        .safe-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen pb-20">
        <!-- 顶部标题区域 -->
        <header id="app-header" class="gradient-bg px-6 py-8 text-center">
            <div id="app-logo" class="mb-4">
                <div class="w-16 h-16 mx-auto bg-accent rounded-2xl flex items-center justify-center mb-4">
                    <i class="fas fa-edit text-white text-2xl"></i>
                </div>
                <h1 id="app-title" class="text-3xl font-bold text-accent">文墨勘</h1>
                <p id="app-subtitle" class="text-sm text-text-secondary mt-2">智能校对，精益求精</p>
            </div>
        </header>

        <!-- 上传文稿按钮 -->
        <section id="upload-section" class="px-6 -mt-8 mb-8">
            <button id="upload-button" class="w-full bg-accent text-white py-6 rounded-2xl shadow-button upload-button flex items-center justify-center space-x-3">
                <i class="fas fa-cloud-upload-alt text-xl"></i>
                <span class="text-lg font-semibold">上传文稿</span>
            </button>
        </section>

        <!-- 功能特点展示 -->
        <section id="features-section" class="px-6 mb-8">
            <div id="features-grid" class="grid grid-cols-2 gap-4">
                <div id="feature-accuracy" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center mb-3">
                        <i class="fas fa-bullseye text-accent text-lg"></i>
                    </div>
                    <h3 class="font-semibold text-text-primary mb-1">精准识别</h3>
                    <p class="text-xs text-text-secondary">AI智能校对</p>
                </div>
                
                <div id="feature-speed" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center mb-3">
                        <i class="fas fa-bolt text-accent text-lg"></i>
                    </div>
                    <h3 class="font-semibold text-text-primary mb-1">快速处理</h3>
                    <p class="text-xs text-text-secondary">百万字级批量处理</p>
                </div>
                
                <div id="feature-format" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center mb-3">
                        <i class="fas fa-file-alt text-accent text-lg"></i>
                    </div>
                    <h3 class="font-semibold text-text-primary mb-1">多格式支持</h3>
                    <p class="text-xs text-text-secondary">txt、docx、pdf</p>
                </div>
                
                <div id="feature-custom" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center mb-3">
                        <i class="fas fa-cog text-accent text-lg"></i>
                    </div>
                    <h3 class="font-semibold text-text-primary mb-1">个性定制</h3>
                    <p class="text-xs text-text-secondary">自定义术语库</p>
                </div>
            </div>
        </section>

        <!-- 最近校对文稿 -->
        <section id="recent-section" class="px-6 mb-8">
            <div id="recent-header" class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-text-primary">最近校对</h2>
                <button id="view-all-button" class="text-sm text-accent">查看全部</button>
            </div>
            
            <div id="recent-list" class="space-y-3">
                <div id="recent-item-1" class="bg-bg-card rounded-2xl p-4 shadow-card card-hover" data-doc-id="doc_001">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-medium text-text-primary">《时光回忆录》</h3>
                        <span class="text-xs text-text-secondary">已完成</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>2024年1月15日</span>
                        <span>发现12处修改</span>
                    </div>
                </div>
                
                <div id="recent-item-2" class="bg-bg-card rounded-2xl p-4 shadow-card card-hover" data-doc-id="doc_002">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-medium text-text-primary">《技术文档规范》</h3>
                        <span class="text-xs text-text-secondary">处理中</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>2024年1月14日</span>
                        <span>预计5分钟完成</span>
                    </div>
                </div>
                
                <div id="recent-item-3" class="bg-bg-card rounded-2xl p-4 shadow-card card-hover" data-doc-id="doc_003">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-medium text-text-primary">《公司年度报告》</h3>
                        <span class="text-xs text-text-secondary">已完成</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>2024年1月13日</span>
                        <span>发现8处修改</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 快速操作 -->
        <section id="quick-actions" class="px-6 mb-8">
            <h2 id="quick-actions-title" class="text-lg font-semibold text-text-primary mb-4">快速操作</h2>
            <div id="quick-actions-grid" class="grid grid-cols-2 gap-4">
                <button id="quick-upload" class="bg-bg-card rounded-2xl p-4 shadow-card card-hover text-left">
                    <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center mb-3">
                        <i class="fas fa-plus text-accent"></i>
                    </div>
                    <h3 class="font-medium text-text-primary mb-1">新建校对</h3>
                    <p class="text-xs text-text-secondary">开始新的校对任务</p>
                </button>
                
                <button id="quick-terms" class="bg-bg-card rounded-2xl p-4 shadow-card card-hover text-left">
                    <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center mb-3">
                        <i class="fas fa-book text-accent"></i>
                    </div>
                    <h3 class="font-medium text-text-primary mb-1">术语库</h3>
                    <p class="text-xs text-text-secondary">管理专业术语</p>
                </button>
            </div>
        </section>
    </div>

    <!-- 底部导航栏 -->
    <nav id="bottom-nav" class="fixed bottom-0 left-0 right-0 bg-bg-card border-t border-border-light flex justify-around items-center h-16 px-2 safe-bottom z-40">
        <a id="nav-home" href="#" class="flex flex-col items-center p-2 nav-item-active">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-0.5">首页</span>
        </a>
        <a id="nav-files" href="P-FILE_MANAGE.html" class="flex flex-col items-center p-2 text-text-secondary">
            <i class="fas fa-folder text-xl"></i>
            <span class="text-xs mt-0.5">文件管理</span>
        </a>
        <a id="nav-profile" href="P-USER_CENTER.html" class="flex flex-col items-center p-2 text-text-secondary">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-0.5">个人中心</span>
        </a>
    </nav>

    <script>
        // 页面交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            // 上传按钮点击事件
            document.querySelector('#upload-button').addEventListener('click', function() {
                // 跳转到上传页面
                window.location.href = 'P-UPLOAD.html';
            });

            // 查看全部按钮点击事件
            document.querySelector('#view-all-button').addEventListener('click', function() {
                // 跳转到文件管理页面
                window.location.href = 'P-FILE_MANAGE.html';
            });

            // 最近校对文稿点击事件
            document.querySelectorAll('[id^="recent-item-"]').forEach(function(item) {
                item.addEventListener('click', function() {
                    // 跳转到校对结果页面，传递文档ID
                    const docId = this.dataset.docId;
                    window.location.href = `P-REVIEW_RESULT.html?doc_id=${docId}`;
                });
            });

            // 快速操作按钮点击事件
            document.querySelector('#quick-upload').addEventListener('click', function() {
                window.location.href = 'P-UPLOAD.html';
            });

            document.querySelector('#quick-terms').addEventListener('click', function() {
                window.location.href = 'P-TERM_MANAGE.html';
            });

            // 底部导航栏点击事件
            document.querySelector('#nav-home').addEventListener('click', function(e) {
                e.preventDefault();
                // 已在首页，无需操作
            });

            document.querySelector('#nav-files').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-FILE_MANAGE.html';
            });

            document.querySelector('#nav-profile').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-USER_CENTER.html';
            });
        });
    </script>
</body>
</html>